fix(end-page): align thank-you paragraph typography with other admin content - #9756
fix(end-page): align thank-you paragraph typography with other admin content#9756tutntut wants to merge 2 commits into
Conversation
Reproduces #9434 — markdown bullets in the thank-you page paragraph render differently from the surrounding text. Added ahead of the fix so before/after can be compared on the same story. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…content The end page styled its admin-authored paragraph with subhead-1 (weight 500, secondary.500) while every other renderer of primary admin-authored paragraph content (FormInstructions, SectionField, ParagraphField) uses body-1 (weight 400, secondary.700). This made the whole thank-you paragraph read as bolded, and markdown bullets inside it visibly inconsistent with the rest of the platform. Use the shared body-1/secondary.700 baseline so both plain paragraphs and bullet lists on the thank-you page match admin content elsewhere. Closes #9434 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
| @@ -56,8 +56,8 @@ export const EndPageBlock = ({ | |||
| const mdComponents = useMdComponents({ | |||
| styles: { | |||
| text: { | |||
There was a problem hiding this comment.
Why the fix is here rather than in the shared useMdComponents hook: the reported "bolded bullets" were a symptom, not the bug. EndPageBlock styled its admin-authored paragraph with subhead-1 (weight 500, secondary.500), while every other renderer of primary admin-authored paragraph content — FormInstructions, SectionField, ParagraphField — uses body-1 (weight 400, secondary.700). A survey of all 15 useMdComponents consumers confirmed EndPageBlock was the sole outlier among primary-paragraph renderers (ImageField and FormLabel deviate deliberately, as smaller supporting text). Changing the end-page text style to the shared baseline fixes bullets and plain paragraphs in one move.
Alternatives tried and rejected:
- A
listStylesfallback inuseMdComponentssoulpicks upstyles.text— only patched bullets, left plain paragraphs at weight 500, and added complexity to a shared hook to work around one caller. This was the first implementation attempt and was reverted. - Passing explicit
liststyles from EndPageBlock only — same partial-fix problem.
tutntut
added
the
ready-for-human
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
Aligns the thank-you (end) page paragraph typography with other admin-authored content so markdown lists and surrounding text render consistently.
Changes:
- Switch
EndPageBlockparagraph styling fromsubhead-1/secondary.500tobody-1/secondary.700. - Add a Storybook story demonstrating a bulleted thank-you paragraph for regression/repro.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| apps/frontend/src/features/public-form/components/FormEndPage/FormEndPage.stories.tsx | Adds a bulleted paragraph story to reproduce/verify consistent markdown list typography. |
| apps/frontend/src/components/FormEndPage/EndPageBlock.tsx | Updates end-page paragraph text style/color to match the shared baseline used by other admin-content renderers. |
Closes #9434
Problem
Markdown bullet points added to the thank-you page paragraph render with visibly different styling from the surrounding text — the paragraph text appears bolded while the bullets do not. Closes #9434.
Solution
The bolded bullets were a symptom, not the bug: the end page styled its admin-authored paragraph with
subhead-1(weight 500,secondary.500), while every other renderer of primary admin-authored paragraph content — FormInstructions, SectionField, ParagraphField — usesbody-1(weight 400,secondary.700). A survey of all 15useMdComponentsconsumers confirmed the end page was the sole outlier. SwitchingEndPageBlockto the shared baseline fixes both plain paragraphs and bullet lists in one move. A Storybook story with a bulleted paragraph was added as a repro.Alternatives considered
useMdComponentshook soulelements would pick up the caller's text style, but dropped it — it only patched bullets, leaving plain end-page paragraphs still rendered at weight 500, and it added complexity to a shared hook to work around one caller's styling choice.subhead-1, but the git history is flattened at the monorepo migration, so the original intent is unrecoverable. It likely aimed to make the thank-you message read as a subtitle under the h2 title — fine for one-liners, but it breaks down for multi-paragraph admin content with lists.Screenshots
Breaking Changes
No - backwards compatible. Note the visual change applies to every form's thank-you page (paragraph weight 500 → 400, colour
secondary.500→secondary.700) — worth a design sanity-check.Tests
TC1: bulleted thank-you paragraph
* item)TC2: existing plain thank-you paragraphs
Clean-up
🤖 Generated with Claude Code